<template>
  <div class="text-h6 text-weight-medium text-primary ellipsis">
    {{ $t('MapCore.LineAttrs') }}
  </div>
  <div v-if="!readonly" class="warning-tips text-weight-medium text-body2 q-mb-md">
    <q-icon class="map-warning-tips-icon" name="mdi-information-outline" size="1.25rem"></q-icon>
    {{ $t('MapCore.SaveTip2', [$t('Submit')]) }}
  </div>
  <qx-form ref="AttrsForm" v-model="formInfo" :option="formOption" nonTop>
    <template v-slot:startCoord>
      <div class="row text-grey-7 items-center">
        {{ getLineCoord('start') }}
      </div>
    </template>
    <template v-slot:endCoord>
      <div class="row text-grey-7 items-center">
        {{ getLineCoord('end') }}
      </div>
    </template>
  </qx-form>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { postAPI } from 'src/api'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { computed, ref, watch } from 'vue'

const props = defineProps({ rowInfo: Object, readonly: Boolean, loading: Boolean })
const emits = defineEmits(['update:loading'])

const formInfo = ref({})
const AttrsForm = ref(null)
const AGVModels = ref([])
const racks = ref([])
const formOption = computed(() => {
  return {
    span: 24,
    labelWidth: 90,
    labelPosition: 'left',
    readonly: props.readonly,
    column: [{
      label: `${i18n.t('MapCore.StartPointCoord')}`, field: 'startCoord', formslot: true
    }, {
      label: `${i18n.t('MapCore.EndPointCoord')}`, field: 'endCoord', formslot: true
    }, {
      label: `${i18n.t('MapCore.LinearVelocity')}(mm/s)`, field: 'speed', type: 'number',
      decimals: 0, min: 0, max: 1000000
    }, {
      label: `${i18n.t('StationAttrs.ObstacleAvoidanceDistance')}(mm)`, field: 'evadeDistance', type: 'number',
      decimals: 0, min: 0, max: 1000000
    }, {
      label: `${i18n.t('StationAttrs.AllowedVehicleType')}`, field: 'admittedVehicleModels', type: 'select',
      multiple: true, options: AGVModels.value, props: { label: 'deviceName', value: 'deviceCode' }
    }, {
      label: `${i18n.t('StationAttrs.AllowedRack')}`, field: 'accessShelves', type: 'select',
      multiple: true, options: racks.value, props: { label: 'originalLabel', value: 'label' }
    }, {
      label: `${i18n.t('StationAttrs.IsReversible')}`, field: 'isRetrograde', type: 'switch',
      falseValue: '0', trueValue: '1', value: '0', class: 'custom-switch'
    }, {
      label: `${i18n.t('StationAttrs.IsRotatable')}`, field: 'isRotatable', type: 'switch',
      falseValue: '0', trueValue: '1', value: '0', class: 'custom-switch'
    }]
  }
})

const getLineCoord = type => {
  const { points = [] } = props.rowInfo || {}
  if (points.length < 4) return ''
  const L = type === 'start' ? 1 : points.length - 1
  return `${points[L - 1]}, ${points[L]}`
}
const getPointInfo = () => {
  if (!AGVModels.value.length) {
    getRemoteData('agv_model', '/yfagv/api/agvTypeDevice/list').then(data => {
      AGVModels.value = [{ deviceName: i18n.t('All'), deviceCode: '-1' }, ...data]
    })
  }
  if (!racks.value.length) {
    getRemoteData('agv_rack', '/yfagv/api/agvMasDataShelfBase/shelfTypeList').then(data => {
      racks.value = [{ originalLabel: i18n.t('All'), label: '-1' }, ...data]
    })
  }
  const { mapGroundCode = '', points = [] } = props.rowInfo || {}, L = points.length - 1
  if (L < 3) return
  const params = {
    mapGroundCode, startPointXy: `${points[0]},${points[1]}`, endPointXy: `${points[L - 1]},${points[L]}`
  }
  emits('update:loading', true)
  postAPI('/yfagv/api/mapLineInfo/findLineInfoByCode', params, data => {
    formInfo.value = data || {}
    emits('update:loading', false)
  }, () => emits('update:loading', false))
}
const submitAjax = mDone => {
  AttrsForm.value.validate((form, done) => {
    const { mapGroundCode } = props.rowInfo || {}
    form.mapGroundCode = mapGroundCode
    if (form.admittedVehicleModels.includes('-1')) form.admittedVehicleModels = '-1'
    if (form.accessShelves.includes('-1')) form.accessShelves = '-1'
    postAPI('/yfagv/api/mapLineInfo/updateOrSaveMapLineInfo', form, () => {
      done()
      if (mDone) mDone()
    }, () => {
      done()
      if (mDone) mDone(false)
    })
  }, () => {
    if (mDone) mDone(false)
  })
}

watch(() => props.rowInfo?.points, () => getPointInfo(), { immediate: true })
defineExpose({ submitAjax })
</script>